<template>
	<d-wrap :title="title">
		<div class='register' slot="body">
			<div class='top'>
				<h1 class='logo pic-wrap'>
					<img src="/static/images/icon.png" alt="..." />
				</h1>

				<div class='info'>
					<p class='t'>逐浪小说App</p>
					<p class='st'>免费看小说，天天领金币</p>
					<i class='install'>立即安装</i>
				</div>
			</div>

			<div class='register-form'>
				<div class='line'>
					<Icon type="person" class='icon'></Icon>
					<i-input v-model="params.email" placeholder="邮箱" clearable ></i-input>
				</div>

				<div class='line'>
					<Icon type="locked" class='icon'></Icon>
					<Input v-model="params.password" type="password" placeholder="密码" clearable ></Input>
				</div>

				<div class='line'>
					<Icon type="locked" class='icon'></Icon>
					<Input v-model="params.rpassword" type="password" placeholder="密码" clearable ></Input>
				</div>

				<div class='line'>
					<Icon type="ipad" class='icon'></Icon>
					<Input v-model="params.mobile" placeholder="手机号码" clearable ></Input>
				</div>

				<div class='line code'>
					<Icon type="social-html5-outline" class='icon'></Icon>
					<Input v-model="params.code" placeholder="验证码" clearable style="width: 150px"></Input>
					<i class="code-img" @click="refresh">{{ code }}</i>
				</div>
			</div>
			
			<div class='register-btn' @click="register">
				<i>注册</i>
			</div>

			<div class="login-text">
				<span class="left" @click="goLogin">去登录</span>
				<span class="right">忘记密码</span>
			</div>
			
			<div class="auth-btn">
				<a href="#" class="fl sns-qq" @click="created"></a>
				<a href="#" class="fr sns-wb" @click="check"></a>
			</div>

			<Spin size="large" class='loading' fix v-if="loading"></Spin>
		</div>
	</d-wrap>
</template>

<script>
	import Cookies from 'js-cookie'
	import DWrap   from 'base/default-wrap'
	

	export default{
		components: {
			DWrap
		},
		data() {
			return {
				title 		: '注册',
				loading		: true,
				code  		: '',
				params		: {
					email: '523044831@qq.com',
					password: 'a123456789',
					rpassword: 'a123456789',
					mobile 	: '15975133418',
					code 	: '123'
				}
			}
		},
		created() {
			setTimeout(() => {
				this.topShow 	= true
				this.bottomShow = true
				this.loading 	= false
			}, 2000)

			this.created_verify()
		},
		methods: {
			register() {
				let params = this.params

				let usernameRule = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				let passwordRule = /^[a-zA-Z]{1,}\w+$/
				let phoneRule	 = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
				console.log(params.password)
				if(!usernameRule.test(params.email)) {
					this.$Message.error('请输入格式正确的邮箱')
					return
				}

				if(!passwordRule.test(params.password)){
					this.$Message.error('请输入格式正确的密码')
					return 
				}

				if(!phoneRule.test(params.mobile)) {
					this.$Message.error('请输入格式正确的手机')
					return 
				}

				if(params.password !== params.rpassword) {
					this.$Message.error('请2次密码保持一致')
					return 
				}

				this.HttpService.register(params).then(data => {
					if(!data.status) {
						this.$Message.success(data.msg)
						this.$Message.success('正在登陆')
						setTimeout(() => {
							this.HttpService.login({username: params.mobile, password: params.password}).then(data => {
								if(!data.status) {
					          		this.$store.commit('setUserInfo', data.data.userInfo)
									Cookies.set('token', data.data.token)
					          		localStorage.setItem('userInfo', data.data.userInfo)
					          		localStorage.setItem('token', data.data.token)

					          		this.$router.push('/form')
					          	} else {
					          		this.$router.push('login')
					          	}
								this.inputClear()
							})
						}, 1000)
					} else {
						this.$Message.error(data.msg)
					}
				})
			},
			created_verify() {
				this.HttpService.createdVerify().then(data => {
					this.code = data.data
					Cookies.set('session', data.session)
				})
			},
			refresh() {
				this.created_verify()
			},
			goLogin() {
				this.$router.push('/login')
			},
			inputClear() {
				let params = this.params;
				for(var key in params) {
					params[key] = ''
				}
			},
			created() {
				this.HttpService.createdVerify().then(data => {
					this.code = data.data
				})
			},
			check() {
				this.HttpService.checkVerify({code: this.code, id: 1}).then(data => {
					this.$Message.info(data.msg)
				})
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/login.styl"
</style>